<template>
  <view class="c-wrapper" @click="gotoCoupon">
    <view class="bg">
      <image src="../../static/newComer.png" mode="widthFix"></image>
    </view>

    <view class="content">
      <view class="left">
        <view class="left-l">
          <text class="left-normal">最高</text>
          <text class="left-big">300</text>
        </view>
        <view class="left-r">
          <text class="new-comer">新人专享</text>
          <text class="left-normal">元超值红包</text>
        </view>
      </view>
      <view class="right">
        <view class="right-c">
          <view class="right-c-c">
            <text>领取</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {}
  },
  methods: {
    gotoCoupon() {
      uni.navigateTo({
        url: '/pages/coupon/index?i=1'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-wrapper {
  position: relative;
  width: 100%;
}

.bg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  image {
    width: 100%;
    border-radius: 5upx;
  }
}

.content {
  width: 100%;
  height: 100%;
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0%;
  display: flex;
  justify-content: center;
  align-items: center;

  .left {
    flex: 3;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    color: #fff;

    .left-normal,
    .new-comer {
      font-size: 30upx;
    }

    .left-big {
      padding: 0 20upx;
      font-size: 80upx;
    }

    .new-comer {
      margin-bottom: 10upx;
      padding: 10upx 20upx;
      background-color: rgba($color: #000000, $alpha: 0.2);
      border-radius: 10upx;
    }

    .left-l,
    .left-r {
      height: 120upx;
      display: flex;

      justify-content: flex-end;
    }

    .left-l {
      align-items: flex-end;
    }

    .left-r {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  .right {
    flex: 1;

    .right-c {
      margin-left: 5upx;
      font-size: 25upx;
      background-color: #c13b38;
      color: #fff;
      width: 130upx;
      height: 130upx;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      box-shadow: 0 0 3upx 3upx rgba($color: #7c7c7c, $alpha: 0.5);
      animation: scale 2s linear infinite;

      .right-c-c {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 110upx;
        height: 110upx;
        border-radius: 50%;
        border: #fff 2upx solid;
      }
    }

    @keyframes scale {
      0% {
        transform: scale(1);
      }
      25% {
        transform: scale(0.9);
      }
      50% {
        transform: scale(0.85);
      }

      75% {
        transform: scale(0.9);
      }

      100% {
        transform: scale(1);
      }
    }
  }
}
</style>
